
* {
    margin: 0px;
    padding: 0px;
}

.nav {
    color: #fc28a8;
    height: 90vh;
    width: 240px;
    position: absolute;
    left: -242px;
    transition: all .5s;
    border: 1px solid #000;
}

.hidden {
    transform: scale(0);
    color: #000;
    position: absolute;
    background-color: #fff;
    border-radius: 10px;
    top: 28px;
    left: -5px;
    transition: all .5s;
    width: 200px;
    z-index: 999;
}

li {
    margin: 0px 0px;
    padding: 10px 0px;
    list-style: none;
    position: relative;
    background-color: #0000ff00;
    transition: all .5s;
}

li:hover>.hidden {
    transform: scale(1);
    backdrop-filter: blur(3px);
    opacity: 0.7;
}

li:nth-child(2n):hover,
li:hover {
    background-color: #72f1b8;
    border-radius: 5px;
    margin: 0px 5px;
}

.hidden>a {
    display: block;
    margin: 3px auto;
    font-size: 20px;
    text-align: center;
}

.screen {
    width: 99vw;
    height: 99vh;
    border: none;
    margin: 0px 0px;
    padding: 0px;
    transition: all .5s;
}

.show {
    color: #6d77b3;
    ;
    position: absolute;
    left: 240px;
    font-size: 60px;
}

.nav:hover {
    margin: 0 240px;
}

.nav:hover>.show {
    opacity: 0;
    transition: all 1s;
}

.nav:hover~.screen {
    margin: 0 240px;
}

li:nth-child(2n) {
    background: #ececec
}


.hidden>button {
    border: none;
    background-color: #00000000;
}
